<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>显示痕迹列表</title>
    <style>
        *{
            margin : 0;
            padding : 0;
        }


    </style>
    <style type="text/css">
        .container {
            display: flex;
            flex-direction: row;
            overflow-x: hidden;
        }
        .left {
            width: 310px;
            height: 94vh;
            background-color: #f5f5f5;
            border-right: 1px solid #ddd;
            padding: 20px 10px;
            font-size: 14px;
        }
        .right {
            flex: 1;
            height: 98vh;
            background-color: #fafafa;
        }

        ul li{
            padding-top: 6px;
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="left" >
        <h2>
            自定义痕迹列表
            <input type="button" name="refresh" value="刷新" onclick="refreshList()"/>
        </h2>

        <ul id="ul_Comments">

        </ul>
    </div>
    <div class="right">
        <div  style="width:auto; height:98vh;" th:utext="${pageoffice}"></div>
    </div>
</div>

<script>
    function Save() {
        //设置保存方法
        pageofficectrl.SaveFilePage="/RevisionsList/save"
        pageofficectrl.WebSave();
    }
    function showRevision() {
        pageofficectrl.ShowRevisions = true;
    }
    function hideRevision() {
        pageofficectrl.ShowRevisions = false;
    }

    function OnPageOfficeCtrlInit() {
        pageofficectrl.AddCustomToolButton("保存", "Save", 1);
        pageofficectrl.AddCustomToolButton("隐藏痕迹", "hideRevision", 18);
        pageofficectrl.AddCustomToolButton("显示痕迹", "showRevision", 9);
    }

    function  getRevisionList(){
        var revisionList = "";
        var revisionsJson=pageofficectrl.word.RevisionsAsJson;
        var revisionObj = JSON.parse(revisionsJson);

        //遍历痕迹
        for(var key in revisionObj){
            let str = '';
            let revisionAuthor = revisionObj[key].author; //author属性为当前痕迹的用户名
            let revisionDate = revisionObj[key].date; //date属性为当前痕迹的日期

            str = dateFormat(revisionDate, '[yyyy-MM-dd HH:mm]') + revisionAuthor + ':';

            if (revisionObj[key].type === 1) { //type代表当前痕迹的类型为“插入”类型
                let revisionType = '插入';
                let revisionTxt = pageofficectrl.word.GetTextFromRevision(parseInt(revisionObj[key].id));//获取当前痕迹的文本内容
                str = str + revisionType +':' + revisionTxt;
            }
            else if (revisionObj[key].type === 2) { //type代表当前痕迹的类型为“删除”类型
                let revisionType = '删除';
                let revisionTxt = pageofficectrl.word.GetTextFromRevision(parseInt(revisionObj[key].id));
                str = str + revisionType +':' + revisionTxt;
            }
            else {
                let revisionType = '调整格式或样式。';
                str = str + revisionType ;
            }

            revisionList += "<li><a href='#' onclick='goToRevision(" + key + ")' title='"+str+"'>" + str + "</a></li>";
        }

        return revisionList;
    }

    function goToRevision(key) {
        pageofficectrl.word.SelectRevision(key);
    }

    function dateFormat(date, format) {
        date = new Date((date-25569)*86400*1000);
        date = roundTimeToSeconds(date);
        date.setHours(date.getHours() - 8);
        var o = {
            'M+': date.getMonth() + 1, //month
            'd+': date.getDate(), //day
            'H+': date.getHours(), //hour
            'm+': date.getMinutes(), //minute
            's+': date.getSeconds(), //second
            'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
            'S': date.getMilliseconds() //millisecond
        };

        if (/(y+)/.test(format))
            format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));

        for (var k in o)
            if (new RegExp('(' + k + ')').test(format))
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));

        return format;
    }

    function roundTimeToSeconds(date) {
        var seconds = date.getSeconds();
        if (seconds < 30) {
            date.setSeconds(0);
        } else {
            date.setSeconds(0);
            date.setMinutes(date.getMinutes() + 1);
        }
        return date;
    }

    function refreshList() {
        document.getElementById("ul_Comments").innerHTML = getRevisionList();
    }

    function AfterDocumentOpened(){
        pageofficectrl.word.DocumentMap = false;
        refreshList();
    }
</script>
</body>
</html>